<template>
  <div>
    <button @click="clickFn($event)">event</button><br><br>
    <input type="checkbox" @click="clickFn($event)" value="checkbox">
    <a href="http://baidu.com">百度</a>
    <div class="outer" @click="outerFn($event)">
      <div class="inner" @click="innerFn($event)"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'eventTest',
  methods: {
    clickFn(e) {
      e.preventDefault();
      e.stopPropagation();
      window.a = 100
      document.addEventListener("touchmove",(e)=> {
        e.preventDefault()
      })
    },
    outerFn(e) {
      e.stopPropagation()
      console.log('outer');
    },
    innerFn(e) {
      console.log('inter');
      // e.stopPropagation()
      document.addEventListener("click", (e)=>{
        e.preventDefault()
      })
    }
  }
}
</script>

<style scoped>
button,input {
  padding: 5px 10px;
  font-size: 16px;

}
.outer {
  height: 400px;
  width: 400px;
  background-color: deepskyblue;
}
.inner {
  height: 200px;
  width: 200px;
  background-color: skyblue;
}
</style>